import { Button, Result } from 'antd'
import { useNavigate } from 'react-router-dom'
import styles from './index.module.less'

function ServerError() {
  const navigate = useNavigate()

  const handleRefresh = () => {
    window.location.reload()
  }

  return (
    <div className={styles.errorContainer}>
      <Result
        status="500"
        title="500"
        subTitle="抱歉，服务器出错了"
        extra={[
          <Button type="primary" key="home" onClick={() => navigate('/')}>
            返回首页
          </Button>,
          <Button key="refresh" onClick={handleRefresh}>
            刷新页面
          </Button>,
        ]}
      />
    </div>
  )
}

export default ServerError